<template>
  <div class="container">
    <div class="leftBlock">
      <span>图书管理系统</span>
      <el-icon class="icon" @click="toggleDark()" v-if="!isDark">
        <Sunny />
      </el-icon>
      <el-icon class="icon" @click="toggleDark()" v-else>
        <Moon />
      </el-icon>
    </div>

    <div class="middleBlock"></div>
    <el-popconfirm title="确认要退出吗？" @confirm="confirmEvent" confirm-button-text="是" cancel-button-text="否">
      <template #reference>
        <div class="rightBlock"></div>
      </template>
    </el-popconfirm>
  </div>
</template>

<script setup lang='ts'>
import { useRouter } from 'vue-router'
import { Sunny, Moon } from '@element-plus/icons-vue'
import { showMessage, toggleDark, isDark } from '@/utils/index'

const router = useRouter()

const confirmEvent = () => {
  sessionStorage.clear()
  showMessage('退出成功，欢迎您下次使用', 'success')
  router.push('/')
}


</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  margin: 0 auto;


  .leftBlock {
    width: 200px;
    height: 60px;
    line-height: 60px;

    .icon {
      margin-left: 25px;
      font-size: 14px;
      cursor: pointer;
      transform: scale(1.5);
    }
  }

  .middleBlock {
    width: 430px;

    :deep(.el-menu--horizontal) {
      border-bottom: none;
    }
  }

  .rightBlock {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-image: url("../assets/openGauss.png");
    background-size: 100% 100%;
    box-shadow: 0 0 4px 4px rgb(211, 210, 210);
  }

}
</style>